<template>
  <a-modal
    :title="isEditMode ? '编辑' : '添加'"
    width="50%"
    :open="visibleFlag"
    @cancel="onClose"
    :maskClosable="false"
    :destroyOnClose="true"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <!-- 表单字段 -->
      <a-form-item label="编码" name="jsonCode">
        <a-input style="width: 60%" v-model:value="form.jsonCode" placeholder="编码" />
      </a-form-item>
      <a-form-item label="协议类型" name="jsonHost">
        <a-input
          style="width: 60%"
          v-model:value="form.jsonHost"
          placeholder="协议类型"
        />
      </a-form-item>
      <a-form-item label="ip" name="jsonIp">
        <a-input style="width: 60%" v-model:value="form.jsonIp" placeholder="ip" />
      </a-form-item>
      <a-form-item label="端口" name="jsonPort">
        <a-input style="width: 60%" v-model:value="form.jsonPort" placeholder="端口" />
      </a-form-item>
      <a-form-item label="请求类型" name="jsonType">
        <a-input
          style="width: 60%"
          v-model:value="form.jsonType"
          placeholder="请求类型"
        />
      </a-form-item>
      <a-form-item label="路径" name="jsonUrl">
        <a-input style="width: 60%" v-model:value="form.jsonUrl" placeholder="路径" />
      </a-form-item>
      <a-form-item label="输入参数" name="jsonInput">
        <a-input
          style="width: 60%"
          v-model:value="form.jsonInput"
          placeholder="输入参数"
        />
      </a-form-item>
      <a-form-item label="注释" name="jsonNote">
        <a-input style="width: 60%" v-model:value="form.jsonNote" placeholder="注释" />
      </a-form-item>
      <a-form-item label="输入参数" name="jdbcInput">
        <a-input
          style="width: 60%"
          v-model:value="form.jdbcInput"
          placeholder="输入参数"
        />
      </a-form-item>
      <a-form-item label="输出" name="jsonOutput">
        <a-input style="width: 60%" v-model:value="form.jsonOutput" placeholder="输出" />
      </a-form-item>
      <a-form-item label="输出url" name="jsonOuturl">
        <a-input
          style="width: 60%"
          v-model:value="form.jsonOuturl"
          placeholder="输出url"
        />
      </a-form-item>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
import { message } from "ant-design-vue";
import { defineEmits, defineProps, reactive, ref, watch } from "vue";
import { apiJsonApi } from "/@/api/business/api-json/api-json-api";
import { SmartLoading } from "/@/components/framework/smart-loading";
import { smartSentry } from "/@/lib/smart-sentry";

const props = defineProps({
  isEditMode: Boolean,
  data: Object,
});

const emits = defineEmits(["reloadList"]);

const form = reactive({
  id: undefined,
  jsonCode: "",
  jsonHost: "",
  jsonIp: "",
  jsonPort: "",
  jsonType: "",
  jsonUrl: "",
  jsonInput: "",
  jsonNote: "",
  jsonOutput: "",
  jsonOuturl: "",
});

const visibleFlag = ref(false);
const formRef = ref(null);

const rules = {
  jsonCode: [{ required: true, message: "编码不能为空" }],
  // 其他规则...
};

function show(data) {
  if (data) {
    Object.assign(form, data);
  } else {
    Object.assign(form, {
      id: undefined,
      jsonCode: "",
      jsonHost: "",
      jsonIp: "",
      jsonPort: "",
      jsonType: "",
      jsonUrl: "",
      jsonInput: "",
      jsonNote: "",
      jsonOutput: "",
      jsonOuturl: "",
    });
  }
  visibleFlag.value = true;
}

function onClose() {
  visibleFlag.value = false;
}

async function onSubmit() {
  formRef.value.validate().then(async () => {
    SmartLoading.show();
    try {
      if (props.isEditMode) {
        console.log(props.isEditMode);
        try {
          await apiJsonApi.update(form, form.jsonCode);
        } catch (error) {
          console.log(error);
        }
      } else {
        await apiJsonApi.add(form);
      }
      message.success("保存成功");
      emits("reloadList");
      onClose();
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      SmartLoading.hide();
    }
  });
}

watch(
  () => props.data,
  (newData) => {
    if (newData) {
      Object.assign(form, newData);
    } else {
      Object.assign(form, {
        id: undefined,
        jsonCode: "",
        jsonHost: "",
        jsonIp: "",
        jsonPort: "",
        jsonType: "",
        jsonUrl: "",
        jsonInput: "",
        jsonNote: "",
        jsonOutput: "",
        jsonOuturl: "",
      });
    }
  }
);
defineExpose({
  show,
});
</script>
